<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <script type="text/javascript">
            function start() {
                PF('startButton1').disable();

                window['progress'] = setInterval(function() {
                    var pbClient = PF('pbClient'),
                            oldValue = pbClient.getValue(),
                            newValue = oldValue + 10;

                    pbClient.setValue(pbClient.getValue() + 10);

                    if (newValue === 100) {
                        clearInterval(window['progress']);
                    }


                }, 1000);
            }

            function cancel() {
                clearInterval(window['progress']);
                PF('pbClient').setValue(0);
                PF('startButton1').enable();
            }

        </script>
        <div class="ContainerIndent"><div id="j_idt14" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt14"><div id="j_idt14_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Misc Components</span></div><div id="j_idt14_content" class="ui-panel-content ui-widget-content">
                <div class="ContainerIndent"><div id="j_idt16" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt16"><div id="j_idt16_content" class="ui-panel-content ui-widget-content">
                        <h3 class="hardblue">Galleria</h3><div id="j_idt18" class="ui-galleria ui-widget ui-widget-content ui-corner-all"><ul class="ui-galleria-panel-wrapper"><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature1.jpg']}" alt="Image Description for nature1.jpg" title="nature1.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature2.jpg']}" alt="Image Description for nature2.jpg" title="nature2.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature3.jpg']}" alt="Image Description for nature3.jpg" title="nature3.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature4.jpg']}" alt="Image Description for nature4.jpg" title="nature4.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature5.jpg']}" alt="Image Description for nature5.jpg" title="nature5.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature6.jpg']}" alt="Image Description for nature6.jpg" title="nature6.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature7.jpg']}" alt="Image Description for nature7.jpg" title="nature7.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature8.jpg']}" alt="Image Description for nature8.jpg" title="nature8.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature9.jpg']}" alt="Image Description for nature9.jpg" title="nature9.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature10.jpg']}" alt="Image Description for nature10.jpg" title="nature10.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature11.jpg']}" alt="Image Description for nature11.jpg" title="nature11.jpg" /></li><li class="ui-galleria-panel ui-helper-hidden"><img id="j_idt19" src="#{resource['demo:images/nature/nature12.jpg']}" alt="Image Description for nature12.jpg" title="nature12.jpg" /></li></ul></div><script id="j_idt18_s" type="text/javascript">$(window).load(function(){PrimeFaces.cw("Galleria","widget_j_idt18",{id:"j_idt18",widgetVar:"widget_j_idt18",showCaption:true,panelWidth:500,panelHeight:313,custom:false},"galleria");});</script></div></div><script id="j_idt16_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt16",{id:"j_idt16",widgetVar:"widget_j_idt16"});</script>

                    <div class="EmptyBox20"/><div id="j_idt21" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt21"><div id="j_idt21_content" class="ui-panel-content ui-widget-content">
                        <h3 class="hardblue">ProgressBar Sample</h3>
<form id="j_idt23" name="j_idt23" method="post" action="/sentinel/misc.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt23" value="j_idt23" />
<span id="j_idt23:progressGrowl"></span><script id="j_idt23:progressGrowl_s" type="text/javascript">$(function(){PrimeFaces.cw('Growl','widget_j_idt23_progressGrowl',{id:'j_idt23:progressGrowl',sticky:false,life:6000,escape:true,msgs:[]});});</script>

                            <h3 style="margin-top:0">Client ProgressBar</h3><button id="j_idt23:start" name="j_idt23:start" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="start();" type="button"><span class="ui-button-text ui-c">Start</span></button><script id="j_idt23:start_s" type="text/javascript">PrimeFaces.cw("CommandButton","startButton1",{id:"j_idt23:start",widgetVar:"startButton1"});</script><button id="j_idt23:cancel" name="j_idt23:cancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="cancel();" type="button"><span class="ui-button-text ui-c">Cancel</span></button><script id="j_idt23:cancel_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt23_cancel",{id:"j_idt23:cancel",widgetVar:"widget_j_idt23_cancel"});</script>
                            <br /><br /><div id="j_idt23:progressBarClient" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="width:300px"><div class="ui-progressbar-value ui-widget-header ui-corner-all"></div><div class="ui-progressbar-label"></div></div><script id="j_idt23:progressBarClient_s" type="text/javascript">$(function(){PrimeFaces.cw("ProgressBar","pbClient",{id:"j_idt23:progressBarClient",widgetVar:"pbClient",initialValue:0,ajax:false});});</script>

                            <h3>Ajax ProgressBar</h3><button id="j_idt23:j_idt27" name="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PF('pbAjax').start();                                     PF('startButton2').disable();;" type="button"><span class="ui-button-text ui-c">Start</span></button><script id="j_idt23:j_idt27_s" type="text/javascript">PrimeFaces.cw("CommandButton","startButton2",{id:"j_idt23:j_idt27",widgetVar:"startButton2"});</script><button id="j_idt23:j_idt28" name="j_idt23:j_idt28" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({s:&quot;j_idt23:j_idt28&quot;,onco:function(xhr,status,args){PF('pbAjax').cancel();PF('startButton2').enable();;}});return false;" type="submit"><span class="ui-button-text ui-c">Cancel</span></button><script id="j_idt23:j_idt28_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt23_j_idt28",{id:"j_idt23:j_idt28",widgetVar:"widget_j_idt23_j_idt28"});</script>
                            <br /><br /><div id="j_idt23:j_idt30" class="ui-progressbar ui-widget ui-widget-content ui-corner-all animated"><div class="ui-progressbar-value ui-widget-header ui-corner-all"></div><div class="ui-progressbar-label" style="display:block">0%</div></div><script id="j_idt23:j_idt30_s" type="text/javascript">$(function(){PrimeFaces.cw("ProgressBar","pbAjax",{id:"j_idt23:j_idt30",widgetVar:"pbAjax",initialValue:9,ajax:true,labelTemplate:"{value}%",global:false,interval:3000,behaviors:{complete:function(ext) {PrimeFaces.ab({s:"j_idt23:j_idt30",e:"complete",f:"j_idt23",p:"j_idt23:j_idt30",u:"j_idt23:progressGrowl",onco:function(xhr,status,args){PF('startButton2').enable();}},ext);}}});});</script>

                            <h3>Static Display</h3><div id="j_idt23:j_idt32" class="ui-progressbar ui-widget ui-widget-content ui-corner-all"><div class="ui-progressbar-value ui-widget-header ui-corner-all" style="display:block;width:50%"></div><div class="ui-progressbar-label" style="display:block">50%</div></div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-4809501067907680645:481647105639560956" autocomplete="off" />
</form>

                        <style tyle="text/css">
                            .animated .ui-progressbar-value {
                                background-image: url("/showcase/javax.faces.resource/demo/images/pbar-ani.gif.xhtml");
                            }
                        </style></div></div><script id="j_idt21_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt21",{id:"j_idt21",widgetVar:"widget_j_idt21"});</script>

                    <div class="EmptyBox20"/><div id="j_idt35" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt35"><div id="j_idt35_content" class="ui-panel-content ui-widget-content">
                        <h3 class="hardblue">Clock Sample</h3>
<form id="j_idt37" name="j_idt37" method="post" action="/sentinel/misc.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt37" value="j_idt37" />

                            <h3 style="margin-top:0">Client</h3><span id="j_idt37:j_idt39" class="ui-clock ui-widget ui-widget-header ui-corner-all"></span><script id="j_idt37:j_idt39_s" type="text/javascript">PrimeFaces.cw("Clock","widget_j_idt37_j_idt39",{id:"j_idt37:j_idt39",widgetVar:"widget_j_idt37_j_idt39",mode:"client",locale:"en_US"});</script>

                            <h3>Server</h3><span id="j_idt37:j_idt41" class="ui-clock ui-widget ui-widget-header ui-corner-all"></span><script id="j_idt37:j_idt41_s" type="text/javascript">PrimeFaces.cw("Clock","widget_j_idt37_j_idt41",{id:"j_idt37:j_idt41",widgetVar:"widget_j_idt37_j_idt41",mode:"server",pattern:"HH:mm:ss dd.MM.yyyy",locale:"en_US",value:1430724906465});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:2" value="-4809501067907680645:481647105639560956" autocomplete="off" />
</form>
                        <div class="EmptyBox20"/></div></div><script id="j_idt35_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt35",{id:"j_idt35",widgetVar:"widget_j_idt35"});</script>

                    <div class="EmptyBox20"/><span id="messages"></span><script id="messages_s" type="text/javascript">$(function(){PrimeFaces.cw('Growl','widget_messages',{id:'messages',sticky:true,life:6000,escape:true,msgs:[]});});</script>

                </div></div></div>
                        <script id="j_idt14_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt14",{id:"j_idt14",widgetVar:"widget_j_idt14"});</script>
                </div>
                        </ui:define>
</ui:composition>